<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DeepSeek翻译插件页面设计</title>
    <style>
      /* 全局样式 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
        background-color: #f5f7f9;
        color: #333;
        padding: 20px;
      }

      h1 {
        text-align: center;
        margin-bottom: 30px;
        color: #2c3e50;
      }

      .container {
        max-width: 1200px;
        margin: 0 auto;
      }

      .page-section {
        margin-bottom: 60px;
        background-color: white;
        border-radius: 10px;
        padding: 25px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .section-title {
        font-size: 24px;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #3498db;
        color: #2c3e50;
      }

      .section-description {
        margin-bottom: 20px;
        color: #666;
        line-height: 1.6;
      }

      /* 弹出窗口样式 */
      .popup-container {
        width: 300px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .popup-header {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        background-color: #f9f9f9;
        border-bottom: 1px solid #e0e0e0;
      }

      .popup-logo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #3498db;
        margin-right: 12px;
      }

      .popup-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      .popup-body {
        padding: 16px;
      }

      .btn {
        display: block;
        width: 100%;
        padding: 10px 0;
        margin-bottom: 12px;
        text-align: center;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
      }

      .btn-primary {
        background-color: #3498db;
        color: white;
        border: none;
      }

      .btn-primary:hover {
        background-color: #2980b9;
      }

      .btn-secondary {
        background-color: #f8f9fa;
        color: #333;
        border: 1px solid #ddd;
      }

      .btn-secondary:hover {
        background-color: #e9ecef;
      }

      .popup-footer {
        padding: 8px 16px;
        text-align: center;
        font-size: 12px;
        color: #777;
        background-color: #f9f9f9;
        border-top: 1px solid #e0e0e0;
      }

      /* 翻译结果页面样式 */
      .translation-page {
        width: 100%;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        overflow: hidden;
        background-color: white;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .translation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        background-color: #f9f9f9;
        border-bottom: 1px solid #e0e0e0;
      }

      .translation-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      .translation-actions {
        display: flex;
        gap: 8px;
      }

      .icon-btn {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 4px;
        cursor: pointer;
      }

      .translation-content {
        padding: 20px;
        max-height: 400px;
        overflow-y: auto;
      }

      .article {
        line-height: 1.6;
      }

      .article h1 {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: left;
      }

      .article h2 {
        font-size: 20px;
        margin: 20px 0 15px;
      }

      .article p {
        margin-bottom: 15px;
      }

      .article img {
        max-width: 100%;
        height: auto;
        margin: 20px 0;
        border-radius: 6px;
      }

      .article ul,
      .article ol {
        margin: 15px 0;
        padding-left: 20px;
      }

      .article li {
        margin-bottom: 8px;
      }

      /* 设置页面样式 */
      .settings-container {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      }

      .form-group {
        margin-bottom: 20px;
      }

      .form-label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #333;
      }

      .form-control {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
      }

      .form-control:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
      }

      /* 加载状态样式 */
      .loading-section {
        position: relative;
        height: 200px;
        background-color: white;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
      }

      .loading-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
      }

      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 15px;
      }

      .loading-text {
        font-size: 14px;
        color: #555;
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>DeepSeek翻译插件页面设计</h1>

      <!-- 弹出窗口 -->
      <div class="page-section">
        <h2 class="section-title">弹出窗口</h2>
        <p class="section-description">
          用户点击插件图标时显示的弹出窗口，提供主要功能入口。
        </p>

        <div class="popup-container">
          <div class="popup-header">
            <div class="popup-logo"></div>
            <div class="popup-title">DeepSeek翻译</div>
          </div>

          <div class="popup-body">
            <button class="btn btn-primary">翻译当前页面</button>
            <button class="btn btn-secondary">下载为Markdown</button>
            <button class="btn btn-secondary">下载为PDF</button>
          </div>

          <div class="popup-footer">API状态: 已连接</div>
        </div>
      </div>

      <!-- 翻译结果页面 -->
      <div class="page-section">
        <h2 class="section-title">翻译结果页面</h2>
        <p class="section-description">
          显示翻译后的文章内容，并提供下载选项。
        </p>

        <div class="translation-page">
          <div class="translation-header">
            <div class="translation-title">翻译结果</div>
            <div class="translation-actions">
              <button class="icon-btn btn-primary">下载MD</button>
              <button class="icon-btn btn-primary">下载PDF</button>
              <button class="icon-btn btn-secondary">关闭</button>
            </div>
          </div>

          <div class="translation-content">
            <div class="article">
              <h1>文章标题（已翻译）</h1>
              <p>
                这里是翻译后的正文内容示例。使用DeepSeek
                API将原始文章内容翻译为目标语言，同时保持原文的格式和结构。这段文字仅用于展示翻译后内容的排版和样式。
              </p>

              <h2>文章小标题（已翻译）</h2>
              <p>
                这是另一个段落示例。翻译后的文本将保持原文的段落结构和基本格式，包括标题层级、列表、强调等。
              </p>

              <img src="https://via.placeholder.com/800x400" alt="示例图片" />
              <p>
                图片上方和下方的文本会被翻译，但图片本身保持不变。这确保了翻译结果中图片与文字的正确关系和上下文连贯性。
              </p>

              <ul>
                <li>列表项一（已翻译）</li>
                <li>列表项二（已翻译）包含更多详细信息和说明</li>
                <li>列表项三（已翻译）</li>
              </ul>

              <p>
                翻译结果会尊重原文的排版布局，确保阅读体验与原文相似。特殊格式如表格、代码块等也会相应保留。
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 设置页面 -->
      <div class="page-section">
        <h2 class="section-title">设置页面</h2>
        <p class="section-description">允许用户配置API密钥和翻译偏好。</p>

        <div class="settings-container">
          <div class="form-group">
            <label class="form-label">DeepSeek API密钥</label>
            <input
              type="password"
              class="form-control"
              placeholder="输入您的API密钥"
            />
          </div>

          <div class="form-group">
            <label class="form-label">目标语言</label>
            <select class="form-control">
              <option value="zh">中文</option>
              <option value="en">英文</option>
              <option value="ja">日文</option>
              <option value="ko">韩文</option>
              <option value="fr">法文</option>
            </select>
          </div>

          <div class="form-group">
            <label class="form-label">展示模式</label>
            <select class="form-control">
              <option value="replace">替换原文</option>
              <option value="side-by-side">双语对照</option>
            </select>
          </div>

          <button class="btn btn-primary">保存设置</button>
        </div>
      </div>

      <!-- 加载状态 -->
      <div class="page-section">
        <h2 class="section-title">加载状态</h2>
        <p class="section-description">
          翻译过程中显示的加载状态，提供用户反馈。
        </p>

        <div class="loading-section">
          <div class="loading-overlay">
            <div class="spinner"></div>
            <div class="loading-text">正在翻译文章，请稍候...</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
